<template>
  <div>
    <div class="topbar px-5 py-3 bg-dark d-flex h-sm">
      <a href="#">
        <div class="logo"></div>
      </a>
      <div class="nav-city d-flex flex-ai-center mx-3">
        <div class="nav-city-box text-primary">
          <i class="iconfont icon-dingwei fs-sm"></i>
          <span>深圳</span>
          <span class="text-white ml-2 fs-xs">[切换城市]</span>
        </div>
      </div>
      <div class="nav d-flex-1">
        <ul class="h-md">
          <li
            v-for="(category, index) in categories"
            :key="index"
            :class="{ active: index == navActive }"
            @click="
              () => {
                navActive = index;
              }
            "
          >
            <a href="#">{{ category }}</a>
          </li>
        </ul>
      </div>
      <div class="nav">
        <ul class="h-lg">
          <li>
            <a href="#">上传简历</a>
          </li>
          <li>
            <a href="#">我要找工作</a>
          </li>
          <li>
            <a href="#">我要招聘</a>
          </li>
        </ul>
        <a class="btn" href="#">注册</a>
        <a class="btn" href="#">登录</a>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      navActive: 0,
      categories: ["首页", "职位", "校园", "公司", "APP", "资讯"]
    };
  }
};
</script>

<style scoped lang="scss">
@import "../assets/style/_variables.scss";

.logo {
  display: block;
  background: url("../assets/images/logo-2x.png") no-repeat 0 0;
  background-size: 7.5rem 1.3571rem;
  width: 7.5rem;
  height: 1.3571rem;
}

.nav-city {
  cursor: pointer;
}

.nav > .btn {
  margin: 0 10px;
  text-align: center;
  font-size: 0.9286rem;
  padding: 3px 10px;
  border: 1px solid map-get($colors, "primary");
  border-radius: 15px;
}

/* @media screen and (max-width: 990px) {
  .topbar {
    display: none;
  }
} */
</style>
